﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WinningList.aspx.cs" Inherits="Lottery.WinningList" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

    <title>电器(东莞)有限公司2018迎春晚会-中奖列表</title>

    <script type="text/javascript" src="./Scripts/EasyUI/jquery.min.js"></script>
    <script type="text/javascript" src="./Scripts/bootstrap.min.js"></script>
    <script type="text/javascript" src="./Scripts/fwork.js"></script>
    <script type="text/javascript" src="./Scripts/typed.min.js"></script>
    <link rel="stylesheet" href="./Content/bootstrap/bootstrap.css" />
    <link rel="stylesheet" href="./Content/Site.css" />

    <style type="text/css">
        .table-bordered tr, td {
            border: 1px solid #CEBE0C !important; /* 整体表格边框 */
        }

         /*小原点移动*/
        .box {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 20px;
            height: 20px;
            cursor: pointer;
            z-index: 99999;
        }

         /*烟花画布*/
        canvas {
            display: block; /*显示为块元素*/
            position: absolute;
            top: 0;
            z-index: 20;
        }

         /*字体*/
        span {
            font-size: 45px;
            font-family: "Helvetica Neue", sans-serif;
            color: #ddd;
            transition: .25s;
        }
        .pink {
            text-shadow: 2px 2px 1px rgba(0,0,0,.4), 0 0 20px #fe3a80, 0 0 40px rgba(255, 0, 91, .75), 0 0 50px rgba(255, 0, 91, .75), 0 0 100px rgba(255, 0, 91, .75);
        }
    </style>

    <script type="text/javascript">

        $(function () {
            //setInterval("fworks()", 5000); //太卡了，不用
            setInterval("ajaxT()", 3000); //每隔1秒自动刷新
            //ajaxT(); //调试用
        });

        function fworks() {
            var fworks = new Fireworks();
            fworks.showRandom();
        }

        function ajaxT() {
            $.ajax({
                type: "POST",
                dataType: "json",
                url: "./Handler/SetHandler.ashx?action=Winner",
                success: function (data) {
                    createShowingTable(data);
                }
            });
        }

        //动态的创建一个table
        function createShowingTable(data) {
            var tableStr = "<table class='table table-bordered'>";
            tableStr = tableStr
            + "<tr class='warning'>"
            + "<td class='text-center tdfont' width='8%'>序 号</td>"
            + "<td class='text-center tdfont' width='12%'>奖 项</td>"
            + "<td class='text-center tdfont' width='80%'>中奖名单</td>"
            + "</tr>";
            var len = data.length;
            for (var i = 0; i < len; i++) {

                tableStr = tableStr + "<tr>"
                + "<td class='tdfont'>" + (i + 1) + "</td>"
                + "<td class='tdfont'>" + data[i].LTypeName + "</td>"
                + "<td class='tdfont'>  ";

                var strsc = new Array(); //定义一数组  
                var strse = new Array();
                strsc = data[i].CardId.split(","); //字符分割  
                strse = data[i].Employee.split(","); //字符分割  
                for (var j = 0; j < strsc.length ; j++) {
                    tableStr = tableStr
                        + " <div class='img-thumbnail' style='height:195px; float:left;border:1px solid silver; margin:2px 3px;'> "
                        + " <div> <img src='showimg.aspx?ID=" + strsc[j] + "' width='120' height='150' style='cursor:pointer' onclick=''; ></div>"
                        + " <div style='width:120px; margin-top:2px ;font-size:12px'>" + strse[j] + "</div> </div>"
                }

                tableStr = tableStr + " </td>"
                + "</tr>";
            }
            tableStr = tableStr + "</table>";
            //添加到div中
            $("#tableAjax").html(tableStr);
        }

        //跳转到中奖页面
        function RetrunList() {
            window.location.href = "index.aspx";
        }

    </script>

    <%--小原点移动--%>
    <script type="text/javascript">
        $(document).ready(function (e) {
            $(".box").mousedown(function (e) {
                iDiffX = e.pageX - $(this).offset().left;
                iDiffY = e.pageY - $(this).offset().top;
                $(document).mousemove(function (e) {
                    $(".box").css({ "left": (e.pageX - iDiffX), "top": (e.pageY - iDiffY) });
                });
            });
            $(".box").mouseup(function () {
                $(document).unbind("mousemove");
            });
            event.preventDefault();
        });
    </script>

</head>
<body class="Index_bg">
    <form id="form1" runat="server">
        <div id="Company" style="width: 1280px; margin: 50px auto; text-align: center; background: none; padding: 10px; clear: both;">
            <div id="typedStrings">
                <%--<p>电器(东莞)有限公司2018迎春晚会 <br />Crystal Mountain (China) Limited 2018 Annual Party</p>--%>
            </div>
            <span id="span"></span>
        </div>
        <div id="tableAjax" style="width: 910px; margin: 10px auto 0 auto; text-align: center; background: none; padding: 10px; clear: both; border: 1px solid #CEBE0C; font-size: 0px;"></div>
        <div id="Index" class="box"><img src="images/piont.jpg" alt="点击查看中奖列表" class="img-circle" width="20" height="20" onclick="RetrunList()" /></div>
    </form>

    <script type="text/javascript">
        $("#span").typed({
            stringsElement: $("#typedStrings"),
            typeSpeed: 70,
            showCursor: false,
            contentType: "html"
        });
        function colorChange(color, heart) {
            $('#span').attr('class', '').addClass(color);
        }
        colorChange("pink", "#ff005b");
    </script>

</body>
</html>
